<template>
    <div class="hg-content-box">
        <div class="hg-ct-text">
            <el-form ref="ruleForm" class="demo-ruleForm" label-width="140px">
                <el-form-item>
                    <div class="hg-search-head hg-py-20 hg-flex">
                        <el-tabs v-model="type" type="card" @tab-click="systemConfig">
                            <el-tab-pane label="系统配置" name="admin"></el-tab-pane>
                            <!--<el-tab-pane label="抽奖设置" name="draw"></el-tab-pane>-->
                            <el-tab-pane label="关于我们" name="about"></el-tab-pane>
                            <el-tab-pane label="活动规则" name="rules"></el-tab-pane>
                            <el-tab-pane label="答题设置" name="question"></el-tab-pane>
                        </el-tabs>
                    </div>
                </el-form-item>
                <el-form-item :label="item.name" v-for="(item,index) in params" :key="index" width="20px">
                    <el-input v-if="item.show_type==='input'" v-model="item.val">
                        <template slot="append" v-if="item.tooltip!=''">{{item.tooltip}}</template>
                    </el-input>
                    <el-input-number v-if="item.show_type==='number'" v-model="item.val" :min="0" :max="100000"></el-input-number>
                    <span v-if="item.tooltip!='' && item.show_type==='number'">{{item.tooltip}}</span>
                    <el-input v-if="item.show_type==='text'" type="textarea" autosize v-model="item.val"/>
                    <EditorText v-if="item.show_type==='editor'" :value="item.val" @input="(data)=>{item.val=data}"></EditorText>
                    <el-upload v-if="item.show_type==='image'" class="avatar-uploader" :show-file-list="false" :action="fileUpload"
                               :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item.code)"
                               :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl||item.path" :src="imageUrl==''?item.path:imageUrl" style="border: 1px solid  #DCDFE6;" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid  #DCDFE6;"></i>
                    </el-upload>
                    <el-radio-group v-if="item.show_type==='radio'" v-model="item.val">
                        <el-radio v-for="(index,m) in item.default_names" :key="index" :value="item.default_vals" :label="index"></el-radio>
                    </el-radio-group>
                    <el-input  v-if="item.show_type==='textarea'" type="textarea" :rows="6" placeholder="请输入内容" v-model="item.val"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>
<script>
    import axios from "@/axios";
    import EditorText from "@/components/EditorText.vue"
    import { getHeaders } from "@/assets/js/common";
    export default {
        //注册组件
        components: {
            EditorText,
        },
        name: "App",
        data() {
            return {
                id:"",//当前播放id
                music:"",
                type: "admin",
                imageUrl:'',
                params: {},
                base: {},
                headers: {},
                credentials: true,
                fileUpload: ""
            }
        },
        mounted() {
            this.base = JSON.parse(sessionStorage.base);
            this.fileUpload = this.base.domain_name + "/api/file/upload";
            this.headers = getHeaders(localStorage._token);
        },
        created() {
            this.systemConfig();
        },
        methods: {
            // 提交
            onSubmit() {
                let info = {};
                let vm = this;
                for(var item in this.params){
                    info[item] = this.params[item].val;
                }
                axios
                    .post("/admin/system/config/store", {
                        data: JSON.stringify(info)
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            vm.$message({
                                type: 'success',
                                message: "添加成功!",
                                onClose: function (msg) {
                                    vm.systemConfig();
                                    //vm.$router.push({ name: "agree_index" });
                                }
                            });
                        } else {
                            vm.$message.error(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.error("网络或服务器异常");
                    });
            },
            //题型导入内容显示
            systemConfig() {
                let vm = this;
                axios
                    .post("/admin/system/config", {
                        group_code:this.type
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            this.params = data.data;
                        } else {
                            vm.$message.error(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.error("网络或服务器异常");
                    });
            },
            // 图片上传成功
            handleSuccess(res, file, fileList, name) {
                let vm = this;
                if (res.code == 200) {
                    this.imgUrl = res.img_path;
                    this.params[name].val = res.file;
                } else {
                    vm.$message.error(res.message);
                }
            }
        }
    }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>